<template>
    <div>
        <div class="img_box" :style="{width:width,height:width}">
            <img src="../../assets/images/image.png" v-if="!src||imgBad"/>
            <img v-lazy="hasHttp?src:imageApi+src" class="img" @click="enlarge = true" @error="imgBad = true" v-else/>
        </div>
        <div class="mask" v-show="enlarge" @click="enlarge = false">
            <img :src="hasHttp?src:imageApi+src" />
        </div>
    </div>
</template>
<script>
import {upload,deletePic} from '@/api/file'
export default {
    data(){
        return{
            imageApi:process.env.VUE_APP_IMAGE_BASE_URL,
            enlarge:false,
            imgBad:false
        }
    },
    props:{
        src:{
            type:String,
            default:''
        },
        name:{
            type:String,
            default:'fileBtn'
        },
        width:{
            type:String,
            default:'40px'
        },
        hasHttp:{
            type:Boolean,
            default:false
        }

    },
    mounted(){
        window.addEventListener('keydown',e=>{
            if(e.key == "Escape"){
                this.enlarge = false;
            }
        })
    },
    methods:{

    }
}
</script>
<style scoped lang="scss">
    .img_box{
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin: 0 auto;

        &>img{
            width: 100%;
            height: 100%;
        }
        .img{
            cursor: zoom-in;
        }
    }
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        display: flex;
        background: rgba(0, 0, 0, 0.7);
        cursor: zoom-out;
    }
    .mask>img{
        width: 25%;
        margin: auto;
    }
</style>
